<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鬼消消乐 - 游戏测试</title>
    <link rel="stylesheet" href="styles/main.css">
    <style>
        .test-panel {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 12px;
            max-width: 200px;
            z-index: 1001;
        }
        
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            margin: 2px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
        }
        
        .test-button:hover {
            background: #0056b3;
        }
        
        .test-log {
            max-height: 150px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 5px;
            margin-top: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1>小鬼消消乐</h1>
            <div class="game-info">
                <div class="score-display">
                    <span class="label">分数:</span>
                    <span id="score">0</span>
                </div>
                <div class="time-display">
                    <span class="label">时间:</span>
                    <span id="time">00:00</span>
                </div>
                <button id="restart-btn" class="restart-btn">重新开始</button>
            </div>
        </header>
        
        <main class="game-main">
            <div id="game-grid" class="game-grid">
                <!-- 游戏网格将通过JavaScript动态生成 -->
            </div>
        </main>
        
        <div class="game-overlay" id="game-overlay" style="display: none;">
            <div class="overlay-content">
                <h2 id="overlay-title">游戏暂停</h2>
                <p id="overlay-message">点击继续按钮恢复游戏</p>
                <button id="continue-btn" class="continue-btn">继续游戏</button>
            </div>
        </div>
    </div>

    <!-- 测试面板 -->
    <div class="test-panel">
        <h4>游戏测试面板</h4>
        <button class="test-button" onclick="testBasicFunctions()">基础功能测试</button>
        <button class="test-button" onclick="testMatchDetection()">匹配检测测试</button>
        <button class="test-button" onclick="testAnimations()">动画测试</button>
        <button class="test-button" onclick="testScoring()">分数测试</button>
        <button class="test-button" onclick="clearTestLog()">清空日志</button>
        <div class="test-log" id="test-log"></div>
    </div>

    <script type="module">
        import { GameEngine } from './js/GameEngine.js';

        let game;
        
        // 初始化游戏
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                const gameContainer = document.querySelector('.game-container');
                game = new GameEngine(gameContainer);
                
                await game.init();
                game.start();
                
                window.game = game;
                logTest('游戏初始化成功');
                
            } catch (error) {
                logTest('游戏初始化失败: ' + error.message, 'error');
            }
        });

        // 测试日志函数
        function logTest(message, type = 'info') {
            const log = document.getElementById('test-log');
            const timestamp = new Date().toLocaleTimeString();
            const color = type === 'error' ? '#ff6b6b' : type === 'success' ? '#4ecdc4' : '#fff';
            
            log.innerHTML += `<div style="color: ${color}">[${timestamp}] ${message}</div>`;
            log.scrollTop = log.scrollHeight;
            
            console.log(`[TEST] ${message}`);
        }

        // 基础功能测试
        window.testBasicFunctions = function() {
            logTest('开始基础功能测试...');
            
            try {
                // 测试游戏状态
                const state = game.getGameState();
                logTest(`游戏状态: ${state.status}`, 'success');
                
                // 测试网格
                const board = game.gameBoard;
                logTest(`网格尺寸: ${board.width}x${board.height}`, 'success');
                
                // 测试单元格
                const cell = board.getCell(0, 0);
                logTest(`单元格测试: 类型=${cell.type}, ID=${cell.id}`, 'success');
                
                // 测试渲染器
                const renderer = game.renderer;
                logTest(`渲染器状态: ${renderer.gridElement ? '正常' : '异常'}`, 
                        renderer.gridElement ? 'success' : 'error');
                
                logTest('基础功能测试完成', 'success');
                
            } catch (error) {
                logTest('基础功能测试失败: ' + error.message, 'error');
            }
        };

        // 匹配检测测试
        window.testMatchDetection = function() {
            logTest('开始匹配检测测试...');
            
            try {
                const board = game.gameBoard;
                
                // 创建水平匹配
                board.setCellType(0, 0, 1);
                board.setCellType(1, 0, 1);
                board.setCellType(2, 0, 1);
                
                const matches = board.findMatches();
                logTest(`检测到 ${matches.length} 个匹配`, matches.length > 0 ? 'success' : 'error');
                
                if (matches.length > 0) {
                    logTest(`匹配详情: 长度=${matches[0].length}, 方向=${matches[0].direction}`, 'success');
                }
                
                // 重新生成网格
                board.regenerateGrid();
                game.renderer.renderGrid(board);
                
                logTest('匹配检测测试完成', 'success');
                
            } catch (error) {
                logTest('匹配检测测试失败: ' + error.message, 'error');
            }
        };

        // 动画测试
        window.testAnimations = function() {
            logTest('开始动画测试...');
            
            try {
                const animManager = game.animationManager;
                
                // 测试交换动画
                animManager.swapAnimation(
                    {x: 0, y: 0}, 
                    {x: 1, y: 0}, 
                    game.renderer, 
                    200
                ).then(() => {
                    logTest('交换动画测试完成', 'success');
                });
                
                // 测试匹配动画
                const testMatch = [{
                    cells: [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}],
                    type: 1,
                    direction: 'horizontal',
                    length: 3
                }];
                
                setTimeout(() => {
                    animManager.matchAnimation(testMatch, game.renderer, 300).then(() => {
                        logTest('匹配动画测试完成', 'success');
                    });
                }, 300);
                
                logTest('动画测试启动', 'success');
                
            } catch (error) {
                logTest('动画测试失败: ' + error.message, 'error');
            }
        };

        // 分数测试
        window.testScoring = function() {
            logTest('开始分数测试...');
            
            try {
                const scoreManager = game.scoreManager;
                
                // 测试基础分数计算
                const score1 = scoreManager.calculateScore(3, 1);
                logTest(`3连分数: ${score1}`, 'success');
                
                const score2 = scoreManager.calculateScore(4, 2);
                logTest(`4连2倍连击分数: ${score2}`, 'success');
                
                // 测试详细分数计算
                const testMatches = [{
                    cells: new Array(5).fill().map((_, i) => ({x: i, y: 0})),
                    type: 1,
                    direction: 'horizontal',
                    length: 5
                }];
                
                const detailedScore = scoreManager.calculateDetailedScore(testMatches, 3);
                logTest(`详细分数计算: ${detailedScore.score}`, 'success');
                
                logTest('分数测试完成', 'success');
                
            } catch (error) {
                logTest('分数测试失败: ' + error.message, 'error');
            }
        };

        // 清空测试日志
        window.clearTestLog = function() {
            document.getElementById('test-log').innerHTML = '';
        };

        // 错误处理
        window.addEventListener('error', (event) => {
            logTest(`全局错误: ${event.error.message}`, 'error');
        });

        // 未处理的Promise拒绝
        window.addEventListener('unhandledrejection', (event) => {
            logTest(`未处理的Promise拒绝: ${event.reason}`, 'error');
        });
    </script>
</body>
</html>